<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户信息</title>
  <!--引入 element-ui 的样式，-->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue-resource/1.5.1/vue-resource.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.9.4/qs.min.js"></script>
  <!-- 必须先引入vue，  后使用element-ui -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <!-- 引入element 的组件库-->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<style>
  .top{
    border-bottom: 1px solid #EFEFEF;
    padding: 15px;
  }
  ul,li{
    margin: 0px;
    padding: 0px;
  }
  li{
    list-style: none
  }
  .page-bar li:first-child>a {
    margin-left: 0px
  }
  .page-bar a{
    border: 1px solid #ddd;
    text-decoration: none;
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #5D6062;
    cursor: pointer;
    margin-right: 20px;
  }
  .page-bar a:hover{
    background-color: #eee;
  }
  .page-bar a.banclick{
    cursor:not-allowed;
  }
  .page-bar .active a{
    color: #fff;
    cursor: default;
    background-color: #E96463;
    border-color: #E96463;
  }

  .page-bar i{
    font-style:normal;
    color: #d44950;
    margin: 0px 4px;
    font-size: 12px;
  }
</style>
<body>
<div id="app">
  <div class="top">
    <div><b>资金记录</b></div>
  </div>
  <template>
    <div class="table">
      <el-table :data="PersonUserList" style="width: 100%">
        <el-table-column prop="r_id" label="序号"></el-table-column>

        <el-table-column prop="r_money" label="金额" width="200"></el-table-column>

        <el-table-column prop="r_type" label="类型"></el-table-column>

        <el-table-column prop="r_source" label="来源"></el-table-column>

        <el-table-column prop="r_date" label="时间"></el-table-column>

        <el-table-column prop="r_remark" label="备注"></el-table-column>
      </el-table>
      <!-- total:总条数 prev:上一页  pager:当前页 next:上一页 jumper 前往第几页-->
      <el-pagination
              background
              layout="total, prev, pager, next, jumper"
              :total="total"
              :current-page="currentPage"
              :page-size="pageSize"
              @size-change="handleSizePersonUser"
              @current-change="handleCurrentPersonUser">
      </el-pagination>
    </div>
  </template>
</div>
</body>
<script type="text/javascript">
  new Vue( {
    el:"#app",
    data:{
      currentPage:1, //初始页
      pageSize:5,    //    每页的数据
      total:1,
      PersonUserList: [],

    },
    methods: {
      handleSizePersonUser(pageSize){
        this.pageSize = pageSize;
        // 点击每页显示的条数时，显示第一页
        this.showData(this.currentPage,this.pageSize)
      },

      showData(currentPage,pageSize){
        var PersonUser = this;
        axios.get("/moneyRecord/"+currentPage+"/"+pageSize).then(res=>{
          console.log(res);
          PersonUser.PersonUserList = res.data.list;
          PersonUser.total = res.data.total;
          console.log(res.data.list);
        })
      },
      handleCurrentPersonUser(currentPage){
        this.currentPage = currentPage;
        // 点击每页显示的条数时，显示第一页
        this.showData(this.currentPage,this.pageSize);
      }
    },created() {
      this.showData(1, 5)
    }
  })
</script>
</html>